import React from 'react'
import {  Form, Button,Divider,Modal,Input} from 'antd'
import { LwjButton } from "components";
import LwjTable from 'components/LwjTable/LwjTable'
import DescriptionList from 'components/DescriptionList';
import moment from 'moment';
import { transferStatus,  } from "utils/enumConfig"
const List = ({
  onSelectRows,
  deny,
  fileVisible,
  approve,
  auditVisible,
  auditType,
  global,
  onShowDetail,
  detailVisible,
  dispatch,
  optionType,
  currentItem,
  onShowAudit,
  form: { getFieldDecorator, validateFields },
  ...tableProps
}) => {
  const { Description } = DescriptionList;

  const FormItem = Form.Item;

  const formItemLayout = {
    labelCol: {
      xs: { span: 4 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 20 },
      sm: { span: 20 },
    },
  };
  const columns = [
    {
      title: '提现金额',
      dataIndex: 'transferMoney',
      key: 'transferMoney',

    },
    {
      title: '操作人',
      dataIndex: 'operator',
      key: 'operator',

    },
    {
      title: '发起时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text, record, index) =>  (moment(record.createTime).format("YYYY-MM-DD") === 'Invalid date' ? '无' : moment(record.createTime).format("YYYY-MM-DD HH:mm:ss"))
    },
    {
      title: '最后操作时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: (text, record, index) =>  (moment(record.updateTime).format("YYYY-MM-DD") === 'Invalid date' ? '无' : moment(record.updateTime).format("YYYY-MM-DD HH:mm:ss"))
    },
    {
      title: '提现状态',
      dataIndex: 'status',
      key: 'status',

      render:(text,record,index)=>(transferStatus[record.status])
    },
    {
      title: '备注',
      dataIndex: 'memo',
      key: 'memo',
    },
    {
      title: '操作',
      key: 'handle',
      render: (text, record) => (
        <span>
          {record.status === "PENDING" && <a onClick={() =>onShowAudit(record)} >审核</a>}
          {record.status === "PENDING" && <Divider type="vertical" />}
          {<a onClick={() => onShowDetail(record)}>详情</a>}
        </span>
      )
    }
    ];
    console.info(currentItem.id);
  return (
    <div>
    <Modal footer={null} visible={detailVisible} width={800} title={optionType === "audit" ? "优惠券审核" : "优惠券详情"} onCancel={() => {
      dispatch({
        type: 'transferToBalanceRecord/setCurrentItem',
        payload: {}
      })
      dispatch({
        type: 'transferToBalanceRecord/closeAllModal'
      })
    }}>
      <DescriptionList
        size="small"
        title={optionType === "audit" ? "审核信息" : "详情信息"}
        style={{
          marginBottom: 32
        }}>
        {optionType === "detail" &&<Description term="操作人">{currentItem.operator}</Description>}
        {optionType === "detail" &&<Description term="最后操作时间">{moment(currentItem.updateTime).format("YYYY-MM-DD") === 'Invalid date' ? '无' : moment(currentItem.updateTime).format("YYYY-MM-DD HH:mm:ss")}</Description>}
        {optionType === "detail" &&<Description term="操作详情">{transferStatus[currentItem.status]+" " +"备注："+currentItem.memo}</Description>}

        {optionType === "audit" &&<Description term="提现金额">{currentItem.transferMoney}</Description>}
        {optionType === "audit" &&<Description term="操作人">{currentItem.operator}</Description>}
        {optionType === "audit" &&<Description term="创建时间">{moment(currentItem.createTime).format("YYYY-MM-DD") === 'Invalid date' ? '无' : moment(currentItem.createTime).format("YYYY-MM-DD HH:mm:ss")}</Description>}
        {optionType === "audit" &&<Description term="最后操作时间">{moment(currentItem.updateTime).format("YYYY-MM-DD") === 'Invalid date' ? '无' : moment(currentItem.updateTime).format("YYYY-MM-DD HH:mm:ss")}</Description>}
        {optionType === "audit" &&<Description term="操作详情">{transferStatus[currentItem.status]+" " +"备注："+currentItem.memo}</Description>}
      </DescriptionList>
      {optionType === "audit" && <div><Button type="primary" onClick={() => {
          dispatch({
            type: 'transferToBalanceRecord/setAuditVisible', payload: {
              auditVisible: true,
              auditType: 'approve'
            }
          })
        }}>审核通过</Button> <Button type="danger" onClick={() => {
          dispatch({
            type: 'transferToBalanceRecord/setAuditVisible', payload: {
              auditVisible: true,
              auditType: 'deny'
            }
          })
        }}>审核不通过</Button> <Button onClick={() => dispatch({ type: 'transferToBalanceRecord/closeAllModal' })}>取消</Button></div>}
    </Modal>

    <Modal
        visible={auditVisible}
        title={auditType === 'approve' ? "审核通过信息" : "审核不通过信息"}
        loading={global}
        destroyOnClose={true}
        onOk={() => {
          validateFields((err, values) => {
            if (err) {
              return;
            }
            if (auditType === 'approve') {
              dispatch({
                type: 'transferToBalanceRecord/approve', payload: {
                  id: currentItem.id,
                  ...values
                }
              })
              dispatch({
                type:'transferToBalanceRecord/closeAllModal',

              })
            }

            else {
              dispatch({
                type: 'transferToBalanceRecord/deny', payload: {
                  id: currentItem.id,
                  ...values
                }
              })
              dispatch({
                type:'transferToBalanceRecord/closeAllModal',

              })
            }
          });

        }}
        onCancel={() => dispatch({
          type: 'transferToBalanceRecord/setAuditVisible', payload: {
            auditVisible: false,
            auditType: ''
          }
        })}
      >
        <Form>
          <FormItem label="备注:" {...formItemLayout}>
            {getFieldDecorator('memo', {
              rules: [{ required: true, message: '请输入备注' }],
            })(<Input type="textarea" placeholder="请输入备注" />)}
          </FormItem>
        </Form>
      </Modal>

      <LwjTable
        {...tableProps}
        dispatch={dispatch}
        columns={columns} />
    </div>
  )
};
export default Form.create()(List)
